<!DOCTYPE html>
<html lang="en">
<head>
    <title>人脸识别系统上传</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="../css/colorpicker.css" />
    <link rel="stylesheet" href="../css/datepicker.css" />
    <link rel="stylesheet" href="../css/uniform.css" />
    <link rel="stylesheet" href="../css/select2.css" />
    <link rel="stylesheet" href="../css/matrix-style2.css" />
    <link rel="stylesheet" href="../css/matrix-media.css" />
    <link rel="stylesheet" href="../css/bootstrap-wysihtml5.css" />
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>

    <style>
        .control-group .controls label{
            display:inline-block;
        }
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }

    </style>

</head>
<body>

<div id="content">
    <div id="content-header">
        <h1>基本情况</h1>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div id="form_1" class="span6">
                <div class="widget-box">
                    <div class="widget-title"> <span class="icon"> <i class="icon-align-justify"></i> </span>
                        <h5>基本情况</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <span id="span1" style="color: red;" className="basicInfo"></span>
                        <form id="form1" action="#" method="get" class="form-horizontal">
                            <input id="cuId" name="cuId" type="text" style="display: none">

                            <div class="control-group">
                                <label class="control-label">照片：</label>
                                <div class="controls">
                                    <input id="imgFile"  type="file" size="29.8" style="opacity: 0;">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">预览：</label>
                                <div class="controls">
                                    <img id="yulan" name="imgUrl" src="" style="width: 120px;height: 150px" alt="等待上传">
                                    <input name="url" value="" type="hidden">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">姓名：</label>
                                <div class="controls">
                                    <input name="name" type="text" class="span11"  />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">卡号：</label>
                                <div class="controls">
                                    <input name="cardid" type="text" class="span11"  />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">图片编号：</label>
                                <div class="controls">
                                    <input name="photoindex" type="text" class="span11"  />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">性别：</label>
                                <div class="controls">
                                    <input name="sex" type="text" class="span11"  />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">有效期：</label>
                                <div class="controls">
                                    <input name="valid" type="text" class="span11"  />
                                </div>
                            </div>

                        </form>

                        <center>
                            <button id="btn1" class="btn btn-success btn-large" style="margin-bottom: 20px;border-radius: 5px">保存基本信息</button>
                        </center>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="../js/jquery.ui.custom.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-colorpicker.js"></script>
<script src="../js/bootstrap-datepicker.js"></script>

<script src="../js/masked.js"></script>
<script src="../js/jquery.uniform.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/matrix.js"></script>
<script src="../js/matrix.form_common.js"></script>
<script src="../js/wysihtml5-0.3.0.js"></script>
<script src="../js/jquery.peity.min.js"></script>
<script src="../js/bootstrap-wysihtml5.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script src="../js/tool.js"></script>
<script>
    $(function () {
        var CLASS_NAME=$("#span1").attr("className");
        //加载表单
        tolLadData(CLASS_NAME);
        upLoadImg2();
        //保存
        $("#btn1").click(function () {
            var r = confirm("您是否确定保存？")
            if (r == true) {
                //添加函数
                add1();
            }
        })

    })
    function add1() {
        console.log($('#form1').serializeJson())
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "http://192.168.130.170:8089/server/person/add",
            contentType: "application/json",
            data:JSON.stringify($('#form1').serializeJson()),
            success: function (result) {
                alert(result.msg);
            }
        });
    }
    //上传图片
    function upLoadImg2(){
        $("#imgFile").live("change",function(){
            //注意这里不能写错。。。
            var file=$("#imgFile")[0].files[0];
            var formData = new FormData();
            formData.append("avatarfile",file);
            //对文件类型进行判断
            var index=file.name.lastIndexOf(".");
            var type=file.name.substring(index);
            if(type!=".jpg"&&type!=".png"){
                alert("只能上传jpg和png格式的图片！！");
                return;
            }
            $.ajax({
                url:"http://www.chengshizhichuang.com/dygabase-app/file/upload",
                data:formData,
                type:"post",
                //这两个属性必须设置！！！！
                contentType: false,
                processData: false, //设置为true时，ajax提交的时候不会序列化data，而是直接使用data
                success:function (data) {
                    $("#yulan").attr("src",data.data[0].fileUrl);
                    $("input[name='url']").attr("value",data.data[0].fileUrl);
                }
            })
        })
    }
</script>
</body>
</html>
